<template>
    <div class="column searchItem">
        <div class="ui two column grid  menu">
            <div :class="firstWidth" class="column header item">
                <!--筛选列表-->
                <fselect v-if="isGroup" fname="stype" @selectValsChange='selectEvent_stype' :val="stype"
                         :data="field.stypes"
                         :placeholder="`请选择`"></fselect>
                <!--筛选名称-->
                <template v-else>{{field.title}}</template>
            </div>
            <div :class="secondWidth" class="ui column  input item">
                <template v-if="type=='confSearch'">
                    <!--一般的下拉菜单-->
                    <fselect v-if="field.flag=='select'" :fname="field.field" @selectValsChange='selectEvent' :val="val"
                             :data="field.list" :placeholder="`请选择${field.title}`"></fselect>
                    <!--对应着筛选列表的输入-->

                    <template v-if="field.flag=='group'">


                        <input type="text" v-model.trim="input_group_val" @keyup.enter.stop.prevent="toSearch"
                               name="con"
                               :placeholder="`请输入${select_group_title}`">
                    </template>

                    <template v-if="field.flag=='bind'">
                        <input type="text" @click.stop.prevent="search_bind(field)" readonly :value="bind_show"
                               :name="field.name"
                               :placeholder="`请搜索${field.title}`">
                        <i class="ui icon remove clear_input" @click="clear_bind" title="清除"></i>
                    </template>
                    <template v-if="field.flag=='simple'">
                        <mytext v-if="text_field" class="simple_text" @onEnter="toSearch" @setVo="simpleEvent" :field="text_field"
                                :param="{}"></mytext>
                    </template>
                    <template v-if="field.flag=='city'">
                        <city v-if="city_field" @setVo="cityEvent" :field="city_field" :param="{}"></city>
                    </template>
                </template>
                <!--其他-->
                <template v-else>

                    <input type="text" v-model.trim="val" @keyup.enter.stop.prevent="toSearch"
                           :name="field.name"
                           :placeholder="`请输入${field.title}`">
                </template>

            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import tool from 'src/util/tool';
    import util from '_util/index';
    import fselect from 'components/form/select'
    import city from 'components/field/city';
    import mytext from 'components/field/text';
    import logic from '_logic';

    export default {
        mounted(){

        },
        data() {
            return {
                val: '',
                bind_show: '',
                city_field: null,
                text_field: null,
                stype: '',
                select_group_title: '',
                groupvalue: '',
                otherval: '',
                input_group_val: '',
            }
        },
        methods: {
            selectEvent_stype(val, fname, title) {
                if (!val) {
                    this.val = '';
                }
                this.stype = val;
                this.select_group_title = title || '';

                this.$emit('setVal', 'stype', this.stype);
            },
            clear_bind() {
                this.val = '';
                this.bind_show = '';
                logic.search.set_fval_tmp(this, this.field.name, this.val, this.bind_show);
            },
            search_bind(field) {
                util.showMybind(this, field, (fname, val, title) => {
                    this.bind_show = val?`${title}(${val})`:'';
                    this.val = val;
                    logic.search.set_fval_tmp(this, fname, this.val, this.bind_show);
                });
            },
            selectEvent(val, fname) {
                this.val = val;
            },
            cityEvent(fname, val) {
                if (val) {
                    let obj = JSON.parse(val);
                    this.val = obj[0].code;

                } else {
                    this.val = '';
                }
                logic.search.set_fval_tmp(this, fname, this.val, val);

            },
            simpleEvent(fname, val) {
                this.val = val;
            },
            set_city_field(){
                this.city_field = null;
                let tmp = this.field;
//                tmp.fval = this.val;
                tmp.fval = logic.search.get_fval(this, this.field.name, this.val);
                tmp.hideTitle = true;

                this.city_field = tmp;


            },
            set_text_field(){
              if(!this.field)
                return;
                let tmp = this.field;
                tmp.fval = this.val;
                tmp.hideTitle = true;

                this.text_field = tmp;

            },
            set_field() {
                if (this.isSimple) {
                    this.set_text_field();
                }
                else if (this.isCity) {
                    this.set_city_field();
                }
                else if (this.isBind) {
                    this.bind_show = logic.search.get_fval(this, this.field.name, this.val);
                }
            },
            toSearch() {
                let eventVue = util.store.get(this,'eventVue');
                eventVue.$emit('searchItem_toSearch');
            },
        },
        created(){

            this.val = this.fval;
            let is_list = util.store.get(this, 'is_list');

            let filterData = util.store.get(this, `filterData.${this.ctl}`, 'list');
            if(!is_list)
                filterData=null;
//                return;
            if (this.isGroup) {
                this.stype = this.field.stypes[0].id;


                let fname = 'stype';
//                let filterData = this.$store.state.list.filterData[this.ctl];

                let con = filterData ? filterData.con : null;

                if (con) {
                    this.$set(this.$data, 'input_group_val', con);
                }

                if (filterData && filterData[fname]) {

                    this.stype = filterData[fname]

                    this.$emit('setVal', 'stype', this.stype);
                }


            }
            else {
                //设置默认值如果有的话

//                let filterData = util.store.get(this, `filterData.${this.ctl}`, 'list');

                let fname = this.type == 'confSearch' ? this.field.field : this.field.name;
                let val = filterData ? filterData[fname] : null;
                if (val) {
                    this.val = val;
                }
                this.set_field();
            }
        },
        watch: {
            fval: function (val, old) {
                if (val != this.val) {
                    this.val = val;
                }
            },
            val: function (val, old) {
                if (this.isGroup) {
                    if (!val) {
                        this.stype = this.field.stypes[0].id;
                    }

                    this.$emit('setVal', 'stype', val ? this.stype : '');
                    this.$emit('setVal', 'con', val);
                } else {
                    let fname = this.type == 'confSearch' ? this.field.field : this.field.name;
                    this.$emit('setVal', fname, val);
                }
                //去除搜索框里的内容
                let ctl = this.$store.state.global.current_ctl

                let filterData = this.$store.state.list.filterData[ctl];
                if (filterData == undefined || Object.keys(filterData).length < 1) {
                    this.$set(this.$data, 'input_group_val', null);
                }

            },
            input_group_val: function (val, old) {
                this.$emit('setVal', 'con', val);
            }

        },
        computed: {
            ctl() {
                return this.$route.query.ctl;
            },
            secondWidth() {
                let tmp = '';
                switch (this.field.flag) {
                    case 'group':
                        tmp = 'ten wide';
                        break;
                    default:
                        tmp = 'twelve wide';
                        break;
                }

                return tmp;
            },
            firstWidth() {
                let tmp = '';
                switch (this.field.flag) {
                    case 'group':
                        tmp = 'six wide';
                        break;
                    default:
                        tmp = 'four wide';
                        break;
                }

                return tmp;
            },
            isGroup() {

                return this.type == 'confSearch' && this.field.flag == 'group';
            },
            isCity() {

                return this.type == 'confSearch' && this.field.flag == 'city';
            },
            isBind() {

                return this.type == 'confSearch' && this.field.flag == 'bind';
            },
            isSimple() {

                return this.type == 'confSearch' && this.field.flag == 'simple';
            },
            isLong() {

                return this.type == 'confSearch' && ['group', 'city'].contains(this.field.flag);
            },
        },
        components: {
            fselect, city, mytext
        },
        props: ['field', 'type', 'fval']
    };
</script>

<style rel="stylesheet/less" scoped lang="less">
    @import "../../common/style/mixin";
    .searchItem {
        .simple_text {
            width: 500px;
        }
        .ui.column.input.item{
            position: relative;
            .clear_input();
            .ui.icon.remove.clear_input{
                top: 25px;
                right: 14px;
            }
        }

    }
</style>
